<template>
	<view class="refund">
		<!-- 产品信息 -->
		<me-scroll-uni :down="downOption"
						@down="downCallback" 
						:up="upOption"
						@up="upCallback" 
						@init="mescrollInit"
						bottom="0" top="20">
			<view class="order">
				<view class="item" v-for="(item,index) in goodsList" :key="index">
					<image :src="item.order_data.items.images" mode="aspectFill"></image>
					<view class="text">
						<view class="hd">{{item.order_data.items.title}}</view>
						<view class="md">规格：{{item.order_data.items.spec_text}}　X{{item.order_data.items.buy_number}}</view>
						<view class="md">价格：￥{{item.order_data.items.price}}元　金额：￥{{item.order_data.items.total_price}}元</view>
					</view>
					<view class="caozuo" v-if="!(item.status == 3 || item.status == 5)" @tap="cancle(item)">
						撤销申请
					</view>
					<view class="reply">
						状态：{{item.status_text}}
					</view>
					<view class="reply" v-if="item.refuse_reason != ''">
						原因：{{item.refuse_reason}}
					</view>
				</view>
			</view>
		</me-scroll-uni>
	</view>
</template>

<script>
	import meScrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			meScrollUni,
		},
		data() {
			return {
				goodsList:[],
				mescroll: null, // mescroll实例对象
				// 下拉刷新的常用配置
				downOption: {
					use: true, //是否启用下拉刷新;默认true
					auto: true //是否在初始化完毕之后自动执行下拉刷新的回调;默认true 
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, //是否启用上拉加载;默认true
					auto: true, //是否在初始化完毕之后自动执行上拉加载的回调,默认true
					page: {
						num: 0, //当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 //每页数据的数量，默认20
					},
					noMoreSize: 3, //配置列表的总数量要大于5条才显示‘--END--’的提示
					empty: {
						tip: '暂无相关数据'
					}
				}
			}
		},
		
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			// 下拉刷新的回调
			downCallback(mescroll) {
				setTimeout(function() {
					mescroll.endSuccess();
				}, 1000);
			},
			// 上拉加载的回调
			upCallback(mescroll) {
				// 此时mescroll会携带page的参数：
				let pageNum = mescroll.num; //页码，默认从1开始
				let pageSize = mescroll.size; //页长,默认每页10条
				this.loadData(pageNum, pageSize,mescroll);
			
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(pageNum = 1, pageSize =10,mescroll = []) {
				var self = this;
				// 获取商品列表信息
				let orderAfterSaleUrl=this.requestUrl.orderAfterSale;
				this.util.request(orderAfterSaleUrl, 'post', function(res) {
					if (res.data.code == 0 && res.data.data) {
						let curPageData = res.data.data.data;
						let totalPage = res.data.data.page_total;
						self.goodsList = self.goodsList.concat(curPageData);
						// 最后一页了，显示end
						mescroll.endByPage(curPageData.length, totalPage);
					}
				});
			},
			// 撤销申诉
			cancle(item){
				let param={
					data:{
						id:item.id
					}
				}
				let cancleAfterSaleUrl=this.requestUrl.cancleAfterSale;
				this.util.request(cancleAfterSaleUrl,"post",function(res){
					uni.showToast({
						title: res.data.msg,
						duration:1500
					});
				},param)
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.refund{background:$uni-bg-color-grey;padding:20rpx;height: 100%;box-sizing: border-box;}
	.order{display: flex;flex-direction: column;padding:20rpx}
	.order .item{background: #FFFFFF;padding:20rpx;border-radius:$uni-border-radius-base;margin-bottom: 15rpx;}
	.order .item image{width:150rpx;height: 150rpx;float: left;}
	.order .item .text{width:420rpx;float: left;margin-left: 20rpx;}
	.order .item .text .hd{font-size: $uni-font-size-base;color: $uni-text-color;}
	.order .item .text .md{font-size: $uni-font-size-sm;color: $uni-text-color-grey;margin-top: 10rpx;}
	.order .item .caozuo{width:30rpx;float: right;padding:10rpx;background: #DD524D;color: #FFFFFF;border-radius: $uni-border-radius-base;font-size: $uni-font-size-base;}
	.order .item .reply{font-size: $uni-font-size-lg;color: #DD524D;width:100%;float: left;padding:20rpx 0 0}
</style>
